<template>
    <el-menu 
      :default-active="defaultActive" 
      :router="router" 
      class="el-menu-vertical-demo"
      v-bind="$attrs"
      @select="handleSelect"
    >
      <template v-for="(item, dataIndex) in data " :key="dataIndex">
        <el-menu-item v-if="!item[children] || !item[children].length" :index="item[index]">
          <!-- <svg-icon :name="`ele-${item[icon]}`"></svg-icon>  123 -->
          <div :class="`icon iconfont icon-${item[icon]}`"></div>

          <span>{{ item[name] }}</span>
        </el-menu-item>
        <el-sub-menu 
          v-else
          :index="item[index]"
        >
          <template #title>
            <!-- <svg-icon v-if="item[icon]" :name="`ele-${item[icon]}`"></svg-icon>   -->
            <span v-if="item[icon]" :class="`icon iconfont icon-${item[icon]}`"></span>

            <span>{{ item[name] }}</span>
          </template>
          <el-menu-item v-for="(item1, index1) in item[children] " :key="index1" :index="item1[index]">
            <!-- <svg-icon v-if="item1[icon]" :name="`ele-${item1[icon]}`"></svg-icon> -->
            <span v-if="item[icon]" :class="`icon iconfont icon-${item[icon]}`"></span>
            <span>{{ item1[name] }}</span>
          </el-menu-item>
        </el-sub-menu>
      </template>
    </el-menu>
</template>

<script lang='ts' setup>
import { PropType } from 'vue';
let props = defineProps({
  data: {
    type: Array as PropType<any[]>,
    required: true
  },
  // 默认选中的菜单
  defaultActive:{
    type:String,
    default:''
  },
  // 是否是路由模式
  router:{
    type:Boolean,
    default:false
  },
  // 键名
  name:{
    type:String,
    default:'name'
  },
  icon:{
    type:String,
    default:'icon'
  },
  index:{
    type:String,
    default:'index'
  },
  children:{
    type:String,
    default:'children'
  }

})

const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>
<style lang="scss" scoped>
.el-menu-vertical-demo{
  svg{
    margin-right: 4px;
    width: 1em;
    height: 1em;
  }
}
.icon{
  font-size: 18px;
  // text-shadow: 0 0 2px #FF0000,
  margin-right: 10px;
}
</style>